'use strict';
import {
    Text,
    View,
    ListView,
    Navigator,
    TouchableOpacity,
    Image,
    ScrollView,
    StyleSheet,
    WebView,
    AlertIOS
} from 'react-native';
import React from 'react';
import URL from '../config/server';
import {Utils} from '../config/utils';
import Icon from 'react-native-vector-icons/Ionicons';
var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return null;
    }
};

export default class WebContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loaded: true
        };
    }

    componentWillMount() {
        console.log(this.props.message);
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <View style={styles.listView}>
                    <Text>
                        正在加载数据，请稍后...
                    </Text>
                </View>
            </View>
        );
    }

    renderScene(route, navigator) {
        return (
            <WebView
                style={styles.main}
                bounces={true}
                startInLoadingState={this.state.loaded}
                scalesPageToFit={true}
                url={this.props.message}
            />
        );

    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                message={this.props.message}
                navigationBar={
                  <Navigator.NavigationBar
                    style={{backgroundColor: '#e02820', alignItems: 'center'}}
                    routeMapper={NavigationBarRouteMapper}
                  />
                }
            />
        );
    }
}

var styles = StyleSheet.create({
    main: {marginTop: 64,backgroundColor:'#ffffff',width:Utils.size.width}
});